<template>
    <div>
        <h2>申请列表</h2>
        <el-table :data="lists" border style="width: 100%">
            <el-table-column fixed type="index" label="#"></el-table-column>
            <el-table-column prop="users_a" label="姓名"></el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" round @click="handleClick(scope.row)">同意</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import axios from "axios";
    import hunru from '@/mixin'

    export default {
        name: "friend",
        data() {
            return {
                lists: [],
                username: '',
                is_accepted: false
            }
        },
        created() {
        },
        mixins: [hunru],
        methods: {
            handleClick(row) {
                this.$confirm('是否同意对方申请?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        axios
                            .put('http://127.0.0.1:8000/api/addfriend/', {
                                users_b: this.username,
                                users_a: row.users_a,
                            }, {
                                headers: {
                                    token: sessionStorage.getItem('token'),
                                },
                            })
                            .then(() => {
                                this.$message({
                                    type: 'success',
                                    message: '添加成功!',
                                });
                                setTimeout(() => {
                                    this.$router.go(0); // 2 秒后重新加载页面
                                }, 1000);
                            })
                            .catch(() => {
                                this.$message({
                                    type: 'info',
                                    message: '已取消',
                                });
                            });
                    })
                    .catch(() => {
                        // 取消按钮的回调函数
                        this.$message({
                            type: 'info',
                            message: '已取消删除',
                        });
                    });
            },
        }
    }
</script>

<style scoped>

</style>